<template>
  <div class="line-chart-container" ref="chartContainer">
    <div class="chart-title">
      <h2>活动时间分布曲线</h2>
    </div>
    <div ref="chart" class="chart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    // 初始化图表
    this.chart = echarts.init(this.$refs.chart);

    // 监听窗口大小变化，重新绘制图表
    window.addEventListener("resize", this.resizeChart);

    // 图表配置项
    const options = {
      tooltip: {
        trigger: "axis",
      },
      xAxis: {
        type: "category",
        data: [
          "06:00",
          "7:30",
          "09:00",
          "10:30",
          "12:00",
          "13:30",
          "15:00",
          "16:30",
          "18:00",
          "19:30",
        ],
        axisLabel: {
          color: "white", // x轴文字颜色
        },
      },
      yAxis: {
        max: 1800,
        type: "value",
        axisLabel: {
          color: "white", // y轴文字颜色
        },
      },
      series: [
        {
          name: "Power",
          type: "line",
          data: [60, 270, 540, 200, 1080, 1350, 1620, 1090, 500, 100],
          smooth: true,
          itemStyle: {
            color: "rgba(52,223,234,0.8)", // 光影颜色和透明度
          },
        },
      ],
    };

    // 使用配置项渲染图表
    this.chart.setOption(options);

    // 调整图表大小以适应容器
    this.resizeChart();
  },
  methods: {
    resizeChart() {
      if (this.chart) {
        this.chart.resize();
      }
    },
  },
  beforeDestroy() {
    // 移除窗口大小变化监听器
    window.removeEventListener("resize", this.resizeChart);

    // 销毁图表实例，释放资源
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  },
};
</script>

<style scoped>
.chart {
  width: 100%;
  height: 100%;
}
.line-chart-container {
  position: relative;
  display: flex;
  flex-direction: column; /* 将子元素垂直排列 */
  justify-content: center;
  align-items: center;
  background-color: rgb(10, 21, 44);
  height: 50%;
}
.chart-title {
  position: absolute; /* 绝对定位 */
  top: 0; /* 顶部对齐 */
  left: 50%; /* 水平居中 */
  transform: translateX(-50%); /* 水平居中 */
  margin-top: 10px; /* 标题与图表内容的间距 */
  text-align: center; /* 文字居中 */
  color: white; /* 字体颜色 */
  font-size: 16px;
  font-weight: bold;
}
</style>
